<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>活动万年历</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/activity.css"/>
	</head>
	<body class="index-body">
		<div class="container index-wrap">
			
			<div class="sun">
				<img src="img/sun.png" alt="" />
			</div>
			<!--活动万年历 start-->
			<div class="activity-calendar">
				<div class="calendar-title">
					<img src="img/calendar.png"/>
				</div>
				<div class="calendar-main">
					<!--活动图片 start-->
					<div class="activity-ad box-shodow8">
						<img src="img/Ad.png"/>
					</div>
					<!--活动图片 end-->
					<!--活动日历 start-->
						<div class="activity-main box-shodow8">
							<div class="row">
								<div class="col-xs-7" style="padding: 0;">
									<div class="date-choose">
										<table border="0" cellspacing="0" cellpadding="0" width="98%" style="margin: 0 auto;margin-left:5px">
											<tr>
												<th>
													<select name="">
														<option value="">2016</option>
													</select>
												</th>
												<th>
													<select name="">
														<option value="">11月</option>
													</select>
												</th>
												<th>
													<a class="back-day">今天</a>
												</th>
											</tr>
										</table>
									</div>
									<div class="calendar" id="calendar">
										<div class="months-container"></div>
									</div>
								</div>
								<div class="col-xs-5 nongli-box" style="padding:22px 7px;">
									<div class="activity-title fn-clear">
										<span class="fn-left">2016年7月</span>
										<span class="fn-right">星期三</span>
									</div>
									<!--中间日期-->
									<div class="activity-date">
										<h2>14</h2>
									</div>
									<!--农历-->
									<div class="longli fn-clear">
										<span class="fn-left">农历:六月十一</span>
										<span class="fn-right red-color">小暑</span>
									</div>
								</div>
							</div>
						</div>
					<!--活动日历 end-->
					<!--活动详情 start-->
					<div class="activity-desc container-fluid box-shodow8">
						<div class="activity-type">
						<div class="activity-num fn-left">
									<i class="icon iconfont">&#xe600;</i>
								仅剩余:<span>147</span>份
								</div>
								<div class="activity-num fn-right">
									<i class="icon iconfont">&#xe601;</i>
								倒计时:<span id="t_d">00</span>天<span id="t_h">00</span>:<span id="t_m">00</span>:<span id="t_s">00</span>s
								</div>
							</div>
								<div class="activity-wrap fn-overflow">
							<div class="fn-left" style="width: 75%;">
								<div class="activity-name">
								<label for="">活动名称:</label><a>节日强省钱飓风</a>
								</div>
								<div class="activity-name">
								<label for="">活动名称:</label><a>2048M流量9块9</a>
								</div>
							</div>
							<div class="qiangou-box fn-left">
								<a class="qiangou"></a>
							</div>
							</div>
					</div>
					<!--活动详情 end-->
				</div>
				<!--arrowBtn-->
				<!--<div class="arrowBtn">
					<a href="javascript:;" class="arrow-prev"></a>
					<a href="javascript:;" class="arrow-next"></a>
				</div>-->
			</div>
			<!--活动万年历 end-->
		</div>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-year-calendar.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//倒计时
function getRTime(){ 
var EndTime= new Date('2016/7/31 10:00:00'); //截止时间 
var NowTime = new Date('2016/7/31 10:00:00'); 
var t =EndTime.getTime() - NowTime.getTime(); 
var d=Math.floor(t/1000/60/60/24); 
var h=Math.floor(t/1000/60/60%24); 
var m=Math.floor(t/1000/60%60); 
var s=Math.floor(t/1000%60); 
if(s<10)s = '0'+s;//秒数小于0 补0;
$("#t_d").html(d); 
$("#t_h").html(h); 
$("#t_m").html(m); 
$("#t_s").html(s); 

} 
setInterval(getRTime,1000); 
$('#calendar').calendar({
	'mouseOnDay': function(e) {
			//进入第二级日历页面
		console.log(e.events[0].name);
		},
	'dataSource':[
    {
        "endDate": new Date(2016,06,16),
        "id": "0",
        "localhost": "",
        "name": "活动1",
        "startDate": new Date(2016,06,09)
    }
]
})
$('#calendar').find('.calendar-header').remove();
$('#calendar').find('.month-container').eq(6).show().siblings('.month-container').hide();
//$('.months-container').html($('#calendar').find('.month-container').eq(6).show());
		</script>
	</body>
</html>
